<template>
  <div class="content">
    <div class="top">
      <div class="warning">
        告警信息：<span class="action">{{ msg }}</span>
      </div>
      <button class="logo" @click="login">登录</button>
    </div>
    <div class="middle">
      <div class="left">
        <div class="item-man">调模人员：<span>张三</span></div>
        <div class="item-cs">
          <div class="code">
            模具编码：
            <input type="password" id="password-input" value="123456" readonly />
            <i id="toggle-password" class="el-icon-view" @click="togglePasswordVisibility"></i>
          </div>
          <div class="status">调模状态：<span class="text">已调模</span></div>
        </div>
        <div class="item-name">模具名称：<span>模具一</span></div>
        <div class="item-code"><span>使用模具编码：</span> <el-input></el-input></div>
      </div>
      <el-button class="right">开始调模</el-button>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="item-hege"><span>试制合格数：</span> <el-input></el-input></div>
        <div class="item-baofei"><span>试制报废数：</span> <el-input></el-input></div>
      </div>
      <el-button class="right" type="primary">调模结束</el-button>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :before-close="handleClose"
    >
      <span slot="title" class="custom-dialog-title">
        调模异常授权
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose"
        ></i>
      </span>
      <el-row type="flex" align="top" style="font-size: 20px; font-weight: 600">
        <el-col :span="18">
          &nbsp;&nbsp; 员工号：<el-input
            v-model="form.userCode"
            placeholder="员工号"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
          <br />
          <br />
          登录密码：<el-input
            type="password"
            v-model="form.password"
            placeholder="登录密码"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            class="button-login"
            @click="dialoglogin()"
            style="margin-top: 20px"
            >登录</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { warnMessage } from '@/api';

export default {
  name: 'ProductionAdjust',
  data() {
    return {
      password: '123456',
      passwordFieldType: 'password',
      passwordToggleIcon: 'el-icon-view"',
      passwordPlaceholder: '请输入密码',
      dialogVisible: false,
      form: {
        userCode: '',
        password: '',
      },
      msg: '',
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.passwordFieldType = this.passwordFieldType === 'password' ? 'text' : 'password';
      this.passwordToggleIcon = this.passwordToggleIcon === 'el-icon-view' ? 'el-icon-close' : 'el-icon-view';
    },
    // 关闭对话框回调
    handleClose() {
      this.dialogVisible = false;
    },
    // 点击登录
    login() {
      this.dialogVisible = true;
    },
    // 告警信息
    async getWranMes() {
      const res = await warnMessage({
        isIndex: false,
        type: '0',
      });
      console.log(res, '生产调模的告警信息');
      this.msg = res.msg;
    },
  },
  created() {
    this.getWranMes();
  },
};
</script>

<style scoped lang="scss">
.content {
  height: 580px;
  display: flex;
  flex-direction: column;
  .top {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    .warning {
      font-size: 22px;
      padding-left: 30px;
      font-weight: 600;
      .action {
        font-size: 24px;
        color: red;
        font-weight: 600;
      }
    }
    .logo {
      flex-shrink: 0;
      font-size: 22px;
      border: none;
      height: 50px;
      width: 70px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      background-color: #409eff;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .middle {
    height: 270px;
    padding: 20px 30px 20px 50px;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      width: 230px;
      height: 200px;
      flex-shrink: 0;
      border: none;
      font-size: 40px;
      font-weight: bold;
      color: #fff;
      background-color: #409eff;
      border-radius: 10px;
      cursor: pointer;
    }
    .left {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .item-man {
        font-size: 30px;
        font-weight: 600;
      }
      .item-cs {
        display: flex;
        align-items: center;
        .code {
          position: relative;
          font-size: 30px;
          font-weight: 600;
          #password-input {
            border-style: none;
            width: 200px;
            height: 50px;
            font-size: 30px;
            border: none;
            outline: none;
          }
          #toggle-password {
            font-size: 30px;
            position: absolute;
            top: 10px;
            right: 30px;
          }
        }
        .status {
          font-size: 30px;
          font-weight: 600;
        }
      }
      .item-name {
        font-size: 30px;
        font-weight: 600;
      }
      .item-code {
        display: flex;
        font-size: 30px;
        font-weight: 600;
        align-items: center;
        .el-input {
          font-size: 30px;
          font-weight: 600;
          width: 300px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 0 50px;

    .right {
      width: 230px;
      height: 150px;
      border: none;
      font-size: 40px;
      color: #fff;
      background-color: #409eff;
      border-radius: 10px;
      cursor: pointer;
    }
    .left {
      .item-hege {
        display: flex;
        font-size: 30px;
        font-weight: 600;
        align-items: center;
        .el-input {
          font-size: 30px;
          font-weight: 600;
          width: 270px;
        }
      }
      .item-baofei {
        display: flex;
        font-size: 30px;
        font-weight: 600;
        align-items: center;
        margin-top: 20px;
        .el-input {
          font-size: 30px;
          font-weight: 600;
          width: 270px;
        }
      }
    }
  }
  .button-login {
    height: 90px;
    width: 100px;
    font-size: 30px;
    text-align: center;
    margin-top: 5px !important;
  }
  .custom-dialog-title {
    font-size: 25px; /* 调整关闭按钮的字体大小 */
    cursor: pointer; /* 添加指针样式，以表明它是可点击的 */
  }
}
</style>
